<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<header th:replace="admin/header::header-fragment">
</header>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-vip" id="layuiadmin-app-form-vip" style="padding-top: 30px; text-align: center;">
  <div class="layui-form-item">
    <label class="layui-form-label">VIP名称</label>
    <div class="layui-input-inline">
      <input type="text" name="vipname" lay-verify="required" placeholder="请输入..." autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">VIP内容</label>
    <div class="layui-input-inline">
      <textarea name="vipcontent" lay-verify="required" placeholder="请输入..." class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">VIP价格</label>
    <div class="layui-input-inline">
      <input type="text" name="vipprice" lay-verify="required" placeholder="请输入..." autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">VIP图片</label>
    <div class="layui-input-inline">
      <input name="vipimage" lay-verify="required" id="LAY_avatarSrc" placeholder="图片地址" value="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">点击上传</label>
    <div class="layui-input-inline layui-btn-container" style="width: auto;">
      <button type="button" class="layui-btn layui-btn-primary test1" id="test1">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">查看图片</button >
    </div>
  </div>
  <div class="layui-form-item layui-hide">
    <button class="layui-btn" lay-submit lay-filter="LAY-user-vip-submit" id="LAY-user-vip-submit">提交</button>
  </div>
</div>


<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
  layui.config({
    base: 'layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'set','layer','upload'],function (){
    var $ = layui.$
            ,form = layui.form
            ,layer = layui.layer
            ,upload = layui.upload;

    //执行实例
    var uploadInst = upload.render({
      elem: '#test1' //绑定元素
      ,url: 'admin/uploadPicture' //上传接口
      ,done: function(res){
        //如果上传失败
        if(res.code > 0){
          return layer.msg('上传失败');
        }
        $("#LAY_avatarSrc").val(res.data.src)
        //上传成功
        return layer.msg('上传成功');
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
    });
  });
</script>
</body>
</html>